<template>
  <div class="recruit-page">
    <div class="sidebar">
      <div class="nav-section">
        <div class="nav-title">导航栏目</div>
        <div class="section-divider"></div>
        <ul class="nav-list">
          <li v-if="routerPath === 'about'" @click="routerIdFn('1')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">公司简介</li>
          <li v-if="routerPath === 'about'" @click="routerIdFn('2')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">人才招聘</li>
          <li v-if="routerPath === 'about'" @click="routerIdFn('3')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">联系我们</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('11')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">徽章</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('12')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">奖牌</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('15')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">纪念币</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('13')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">钥匙扣</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('14')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">书签</li>          
          <li v-if="routerPath === 'products'" @click="routerIdFn('18')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">纪念盘</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('16')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">奖杯</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('17')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">冰箱贴</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('19')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">开瓶器</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('20')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">袖扣/领带夹</li>
          <li v-if="routerPath === 'products'" @click="routerIdFn('21')"><img src="@/assets/image/left_li.gif" alt="icon"  class="nav-icon">挂件/贴牌</li>
        </ul>
      </div>
      <div class="news-section">
        <div class="news-title">新闻中心</div>
        <div class="section-divider"></div>
        <ul class="news-list">
          <li><img src="@/assets/image/li.png" alt="icon" class="news-icon">【打卡】平阳翡翠湾欢乐谷1日游</li>
          <li><img src="@/assets/image/li.png" alt="icon" class="news-icon">乔迁新址，砥砺前行，我们蓄势待发！</li>
          <li><img src="@/assets/image/li.png" alt="icon" class="news-icon">防灾工作常松懈，筑牢生命至上的防线</li>
          <li><img src="@/assets/image/li.png" alt="icon" class="news-icon">2022年新春人才储备计划发布啦</li>
          <li><img src="@/assets/image/li.png" alt="icon" class="news-icon">佳博元旦趣味三日游</li>
        </ul>
      </div>
      <div class="contact-section">
        <div class="contact-title">联系我们</div>
        <div class="section-divider"></div>
        <div class="contact-info">
          <div>联系人：陈经理</div>
          <div>手机：15888788886</div>
          <div>座机：+86-0577-63181888</div>
          <div>邮箱：sales1@wzjiabo.com</div>
          <div>地址：浙江平阳县万全镇平瑞路136号</div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <navRight />
    </div>
  </div>
</template>

<script>
import navRight from '@/components/navRight/index.vue'
export default {
  name: 'navLeft',
  components: {
    navRight
  },
  data() {
    return {
      routerPath: ''
    }
  },
  mounted() {
    this.routerPath = this.$route.path.split('/')[1]
  },
  methods: {  
    routerIdFn(id) {
      this.$router.push(`/${this.routerPath}/${id}`).then(() => {
        // 路由跳转完成后获取id
        const idd = this.$route.params.id
        console.log('当前路由id:', idd)
      }).catch(err => {
        console.error('路由跳转失败:', err)
      })
    }
  }
}
</script>

<style scoped>
.recruit-page {
  display: flex;
  max-width: 1170px;
  margin: 0 auto;
  padding: 30px 0;
  background: #fafbfc;
  box-sizing: border-box;
  gap: 0px;
}
.sidebar {
  width: 250px;
  font-size: 15px;
  color: #222;
}
.nav-section, .news-section, .contact-section {
  margin-bottom: 22px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 16px 18px 14px 18px;
  transition: box-shadow 0.2s;
}
.nav-title, .news-title, .contact-title {
  font-weight: bold;
  color: #1b4e54;
  margin-bottom: 6px;
  font-size: 16px;
  border-left: 3px solid #1b4e54;
  padding-left: 8px;
  letter-spacing: 1px;
}
.section-divider {
  height: 2px;
  background: #e5e5e5;
  margin: 0 0 10px 0;
  border: none;
}
.nav-list, .news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-list li {
  padding: 6px 0 6px 4px;
  cursor: pointer;
  border-left: 2px solid transparent;
  border-radius: 3px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
}
.nav-list li:hover {
  color: #409EFF;
}

.news-list li {
  cursor: pointer;
  padding: 3px 0 3px 2px;
  color: #666;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.news-list li:hover {
  color: #409EFF;
}

.contact-info div {
  margin-bottom: 4px;
  color: #444;
  font-size: 14px;
}

.nav-icon, .news-icon {
  width: 6px;
  height: 6px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recruit-page {
    flex-direction: column;
    padding: 20px 0;
    gap: 20px;
  }
  
  .sidebar {
    width: 100%;
    order: 2;
  }
  
  .main-content {
    order: 1;
    width: 100%;
  }
  
  .nav-section, .news-section, .contact-section {
    margin-bottom: 15px;
    padding: 12px 15px;
  }
  
  .nav-title, .news-title, .contact-title {
    font-size: 15px;
    text-align: left;
  }
  
  .nav-list li {
    padding: 8px 0 8px 4px;
    font-size: 14px;
    text-align: left;
    justify-content: flex-start;
  }
  
  .news-list li {
    padding: 6px 0 6px 2px;
    font-size: 12px;
    text-align: left;
    justify-content: flex-start;
  }
  
  .contact-info div {
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .recruit-page {
    padding: 15px 0;
  }
  
  .nav-section, .news-section, .contact-section {
    padding: 10px 12px;
  }
  
  .nav-title, .news-title, .contact-title {
    font-size: 14px;
    text-align: left;
  }
  
  .nav-list li {
    font-size: 13px;
    text-align: left;
    justify-content: flex-start;
  }
  
  .news-list li {
    font-size: 11px;
    text-align: left;
    justify-content: flex-start;
  }
  
  .contact-info div {
    font-size: 12px;
    text-align: left;
  }
}
</style> 